| v | 您所在的位置：网站首页 › PicView › v |
v
|
v-picview---vue图片预览插件，类微信小程序image组件的vue图片组件，轻巧实用
v-picview图片预览插件如何使用v-picview指令的属性参数vImage组件的属性参数vPicview预览组件的属性参数vPicview的方法感谢阅览
v-picview图片预览插件
一款基于Vue，typescript编写的v-picview图片预览插件，并不是插件的二次开发，纯自造轮子，体积小，引用少，实用。 包括了类似微信小程序image组件的vImage组件，可以自定义宽高后，自定义不同的图片显示方式，该组件还有属性设置是否点击进行图片放大预览。 预览模式的开启还可以使用指令方式：v-picview。 如何使用 //安装依赖 npm i v-picview -S注意需要引入v-picview.css import Vue from 'vue' import 'v-picview/lib/v-picview.css' import vPicview from 'v-picview' import { vImage } from 'v-picview' Vue.component(vImage) Vue.use(vPicview,{ escClose:true, arrowShortcuts:true, zoom:true, footer:true, animation:'fadein', popperClass:'my-picview-box', onDownload(item:any){ console.log(item) }, onNext(index:number, item:object, oldItem:object){ console.log('下一页',index,item,oldItem) }, onPrev(index:number, item:object, oldItem:object){ console.log('上一页',index,item,oldItem) }, onChange(index:number, item:object, oldItem:object){ console.log('页数改变',index,item,oldItem) }, onImgLoaded(e:any){ console.log('图片加载完成',e) }, onZoomIned(e:any){ console.log('图片放大',e) }, onZoomOuted(e:any){ console.log('图片缩小',e) }, onDragStart(e:any){ console.log('拖拽开始',e) }, onDragMove(e:any){ console.log('拖拽中',e) }, onDragEnd(e:any){ console.log('拖拽结束',e) } })包括两种预览模式，vImage组件模式和v-picview指令模式 v-picview指令的属性参数 Attr. NameDescriptionRequiredDefault Valuedescribe图片的描述，如果打开了vPicview的footer会显示在底部Ngroup图片的分组，如果是同一分组的图片，在图片查看器里面可以进行左右切换查看N- vImage组件的属性参数 Attr. NameDescriptionRequiredDefault Valuewidth图片的宽度N350pxheight图片的高度N350pxsrc图片的地址路径Ydescribe图片的描述，如果打开了vPicview的footer会显示在底部NviewSrc图片查看器的图片地址路径，如果不填写，则默认取srcNgroup图片的分组，如果是同一分组的图片，在图片查看器里面可以进行左右切换查看N-noView点击是否打开图片查看器，默认是点击后打开查看器NfalsemodescaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。 aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。NscaleToFill vPicview预览组件的属性参数vPicview预览组件会在body下面渲染一个全屏预览盒子，即入口文件初始化组件的时候的属性参数 import Vue from 'vue' import 'v-picview/lib/v-picview.css' import vPicview from 'v-picview' Vue.use(vPicview,{ ... }) Attr. NameDescriptionRequiredDefault ValuearrowShortcuts是否启用左右箭头键切换图片页数Ntruezoom是否需要放大功能Ntruefooter是否启用底部栏显示描述Ntrueanimation打开的动画：fadein，flyinNfadeinpopperClass图片查看器的classN-onDownload点击下载图标的回调函数N-onNext触发下一页图片时的回调函数N-onPrev触发上一页图片时的回调函数N-onChange页数改变时的回调函数N-onImgLoaded图片查看器在图片加载完成后的回调函数N-onZoomIned图片放大时的回调函数N-onZoomOuted图片缩小时的回调函数N-onDragStart图片放大后拖动开始时的回调函数N-onDragMove图片放大后拖动进行中的回调函数N-onDragEnd图片放大后拖动结束时的回调函数N- vPicview的方法window.$picview可直接获取vPicview的实例 download() 下载查看器当前显示的图片close() 关闭查看器next() 下一页图片prev() 上一页图片 感谢阅览v-picview图片预览插件，一款基于vue的图片预览插件 |
【本文地址】
公司简介
联系我们